<template>
	<view class="container">
		<view class="title">店铺名称必须和平台名称一致，包括括号里面的后缀。如果店铺名称填写不完整导致订单审核错误，概不负责。</view>
		<view class="body">
			<!-- 店铺 -->
			<view class="b-box">
				<view class="card-box-head u-flex u-col-center">
					选择平台
				</view>
				<view class="card-box" @tap.stop="addShop(1)">
					<uni-list :border="false">
						<uni-list-item :border="false" title="美团平台" :thumb="$IMG_URL + '/imgs/freelunch/mt-icon.png'"
							thumb-size="lg" rightText="去授权" showArrow></uni-list-item>
					</uni-list>
				</view>
			</view>
			<view class="b-box" @tap.stop="addShop(2)">
				<view class="card-box">
					<uni-list>
						<uni-list-item title="饿了么平台" :thumb="$IMG_URL + '/imgs/freelunch/elm-icon.png'" thumb-size="lg"
							rightText="去授权" showArrow></uni-list-item>
					</uni-list>
				</view>
			</view>
			<view class="b-box" @tap.stop="addShop(3)">
				<view class="card-box">
					<uni-list>
						<uni-list-item title="京东平台" :thumb="$IMG_URL + '/imgs/freelunch/jd-icon.png'" thumb-size="lg"
							rightText="去授权" showArrow></uni-list-item>
					</uni-list>
				</view>
			</view>
		</view>
		<!-- <view class="sub">
			<button>提交</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {}
		},
		methods: {
			addShop(shopType) {
				this.$util.jump('/pages/shop/shop-add?shop_type=' + shopType)
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}
	}
</script>

<style lang="scss">
	.container {
		background: #eee;
		min-height: 100vh;

		.body {
			margin: 30rpx 0 120rpx;

			.b-box {
				margin-top: 30rpx;
			}
		}

		.card-box-head {
			color: #222;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			width: 90%;
			margin-left: 5%;
			height: 50rpx;
			align-items: center;
			margin-bottom: 20rpx;
			font-weight: 600;
		}

		.card-box {
			width: 90%;
			min-height: 100rpx;
			margin: 0 5%;
			background: #FFF;
			background-size: 100% 100%;
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(213, 175, 97, 0.34);
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			z-index: 810;




			&-body {
				width: 90%;
				margin: 0 5%;
				display: flex;

				.cb-wallet-item {
					display: flex;
					flex-direction: column;
					flex: 1;

					.cb-wallet-item-num {
						font-size: 40rpx;
						font-weight: 700;
					}

					.cb-wallet-item-tip {
						font-size: 28rpx;
					}
				}
			}

			&-body-cloumn {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;

				.no-shop-tip {
					color: #888;
					margin-bottom: 20rpx;
				}

				button {
					color: #ff9000;
					background: #fff;
					border: 1px solid #ff9000;
					border-radius: 37px;
					height: 74rpx;
					line-height: 74rpx;
					width: 180rpx;
					font-size: 28rpx;
				}

				.list-conten {
					display: flex;
					justify-content: space-between;
					width: 100%;
					height: 100rpx;
					align-items: center;
					font-size: 28rpx;
					color: #888;

					.list-con-item {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;
						color: #666;
					}

					.list-con-active {
						color: #ff9000;

					}

					.list-con-left {}

					.list-con-right {
						color: #bbb;
						font-size: 24rpx;
						font-weight: 400;
					}
				}
			}

			.recharge {
				height: 60rpx;
				line-height: 60rpx;

				font-weight: 600;
				font-size: 34rpx;
				color: #ff9000;
				text-align: center;

			}
		}

		.b-box .card-box-xieyi {
			font-size: 28rpx;
			font-weight: 400;
			justify-content: flex-start;

			.xieyi {
				margin-left: 10rpx;
			}

			text {
				color: #ff9000;
			}
		}
	}

	.sub {
		position: fixed;
		z-index: 800;
		background: #fff;
		height: 80rpx;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		bottom: var(--window-bottom);
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		bottom: 0;
		/* #endif */
		padding: 10rpx 0;

		button {
			height: 100%;
			margin: 0 10%;
			border: none;
			background: #ff9000;
			border-radius: 80rpx;
			color: #fff;
		}

	}

	.title {
		background: #ff9000;
		color: #fff;
		font-size: 24rpx;
		padding: 18rpx 5%;
	}
</style>
